<template>
  <div class="datas-container">
    <div id="data-view" :style="{ height: tableHeight + 'px' }">
      <dv-border-box-10 v-if="allData">
        <top-header />
        <div class="main-content">
          <digital-flop :datas="allData.mainInfos" />

          <div class="scroll-msgs">
            <div class="left">
              <ranking-board
                @choosePartner="choosePartner"
                :datas="allData.partners"
              />
            </div>
            <div class="right">
              <scroll-board
                ref="scrollBoard"
                :curpartner="curpartner"
                :datas="echartsData"
              />
            </div>
          </div>
        </div>
      </dv-border-box-10>
      <div class="loading" v-else>加载中...</div>
    </div>
  </div>
</template>

<script>
import topHeader from "./topHeader";
import digitalFlop from "./digitalFlop";
import rankingBoard from "./rankingBoard";
import scrollBoard from "./scrollBoard";
import { autoTableHeight } from "@/utils/tools";
import { datasPan, dayData } from "@/api/videos/monitorPartners";
import { getToken } from "@/utils/auth";
export default {
  name: "DataView",
  components: {
    topHeader,
    digitalFlop,
    rankingBoard,
    scrollBoard,
  },
  data() {
    return {
      tableHeight: 600,
      allData: "",
      echartsData: [],
      curpartner: "",
    };
  },
  mounted() {
    setInterval(() => {
      this.datasPanApi();
    }, 5000);
    autoTableHeight(130, (e) => {
      this.tableHeight = e;
    });
  },
  methods: {
    datasPanApi() {
      if (!getToken()) {
        return;
      }
      datasPan().then((res) => {
        this.allData = res.data;
        let curpartner = res.data.partners[0];
        this.curpartner = curpartner;
        this.dayDataApi(curpartner.id);
      });
    },
    dayDataApi(id) {
      dayData({ id }).then((res) => {
        this.echartsData = res.data;
        this.$refs.scrollBoard?.draw();
      });
    },
    choosePartner(item) {
      this.curpartner = item;
      this.dayDataApi(item.id);
    },
  },
};
</script>

<style lang="less">
.datas-container {
  padding: 20px;
  background-image: url("./img/bg.png");
  background-size: 100% 100%;
  box-shadow: 0 0 3px blue;
}
#data-view {
  background-color: #030409;
  color: #fff;
  margin-top: 40px;
  .scroll-msgs {
    display: flex;
    height: 600px;
    margin-top: 20px;
    width: 100%;
    .left {
      flex: 1;
    }
    .right {
      flex: 1;
      overflow: hidden;
    }
  }
}
.loading {
  font-size: 32px;
  text-align: center;
  margin-top: 100px;
}
</style>
